<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Doctaskis</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../plugins/flexigrid/css/flexigrid.css" rel="stylesheet" type="text/css" />
<link href="../css/documentstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../css/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/jquery-ui-1.10.3.custom.js"></script>
<script src="../plugins/flexigrid/js/flexigrid.js"></script>

<script>
function test(){
	alert("go here1");
}
$(function() {
	//添加jquery效果
	$("input:submit,input:reset,button").button();
	$( "#selectTabs" ).tabs();
	//设置对话框效果
	 $( "#addFriendDialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
    //设置Tabs效果
    //$( "#selectTabs" ).tabs();
    
	function addAction(){
	  $( "#addFriendDialog" ).dialog( "open" );  	
	}
	
	function delAction(com,grid){
		selected_count = $('.trSelected', grid).length;
		if (selected_count == 0) 
		{
			alert('请选择一个好友!');
			return;
		}
		if (selected_count > 1) 
		{
			alert('一次只能删除一个好友!');
			return;
		}
		names = '';
		$('.trSelected td:nth-child(2) div', grid).each(function(i) 
		{
		if (i) names += ',';
		names += $(this).text();
		});
		ids = '';
		$('.trSelected td:nth-child(1) div', grid).each(function(i) 
		{
		if (i) ids += ',';
		ids += $(this).text();
		});
		if (confirm("确定删除好友[" + names + "]?")) 
		{
		  delFriend(ids);
		}
	}
	
	function delFriend(ids) 
	{
		$.ajax
		({
			url : '../user.do?actMethod=deleteFriendAction',
		    data : {  friendname : ids},
		    type : 'POST',
		    success: function(msg){
				if(msg=="success"){
					$("#friendsTable").flexReload();
					alert("删除成功！");
				}else{
					alert("Oh no!error:"+msg);
				}
			},
			error: function(msg){
				alert(msg);
			}
		 });
	}
	
	 $('#friendsTable').flexigrid( {
		 url: '../user.do?actMethod=showAllFriend',
		dataType: 'json',
		colNames:['用户名','邮箱','性别','年龄', '出生地','所在地'],
		colModel : [
			{display: '用户名', name : 'username', width : 60, sortable : true, align: 'center'},
			{display: '邮箱', name : 'email', width : 180, sortable : true, align: 'left'},
			{display: '年龄', name : 'age', width : 100, sortable : true, align: 'left'},
			{display: '性别', name : 'sex', width : 100, sortable : true, align: 'left'},
			{display: '出生地', name : 'birthplace', width : 220, sortable : true, align: 'left'},
			{display: '所在地', name : 'localplace', width : 220, sortable : true, align: 'left'}
			],
		buttons : [
			{name: '添加好友', bclass: 'add', onpress : addAction},
			{name: '删除好友', bclass: 'delete', onpress : delAction},
			{separator: true}
			],
		searchitems : [
			{display: '用户名', name : 'username',isdefault: true},
			{display: '出生地', name : 'birthplace'}
			],
		sortname: "username",
		sortorder: "asc",
		title: 'Friends',
		width: 30,
		height: 200
    }); 
    
    $( "#addNewFriendBtn" )
		.button()
		.click(function() {
			var newFriendName = $("#newFriendName").val();
			$.ajax
			({
				url : '../user.do?actMethod=addFriendAction',
			    data : { friendname : newFriendName},
			    type : 'POST',
			    success: function(msg){
					if(msg=="success"){
						$("#friendsTable").flexReload();
						alert("添加成功！");
						$( "#addFriendDialog" ).dialog( "close" );  	
					}else{
						alert("Oh no!error:"+msg);
					}
				},
				error: function(msg){
					alert(msg);
				}
			 });
	});
	$("#loadingpic").hide();
	//失去焦点去验证用户名是否存在
   $("input[name='newFriendName']").blur(function(){
   		$("#loadingpic").show("fast");
      if(this.value==""){
      	$("#loadingpic").hide(1000);
          $("#tusername").text("请输入用户名");
          $("#tusername").css("color","orange");
          return false;
      }
      else{
      
     	 $.ajax
		({
			url : '../user.do',
		    data : {  username : this.value},
		    type : 'POST',
		    success: function(msg){
				if(msg=="success"){
					$("#loadingpic").hide();
	      	   		$("#tusername").text("查找失败");
	       	   		$("#tusername").css("color","red");
				}else{
					$("#loadingpic").hide("fast");
	          		$("#tusername").text("查找成功");
	          		$("#tusername").css("color","green");
				}
			},
			error: function(msg){
				alert(msg);
			}
		 });
    }
  });
});
</script>
<style type="text/css">
#friendsField{
	
	background-color: #FFF;
	width: 958px;
	margin: 0 auto;
	text-align: center;
}
#friendsField p{
	color:#000;
	text-align:left;
	padding-top:20px;
	padding-left:30px;
}
</style>
</head>
<body>
<input id="friendsInfo" type="hidden" value="${friendInfo}"/>
<div id="wrapper">
	<div id="header">
		<div id="logo">
			<h1><a href="#">doctaskis </a></h1>
			<p> BY AVERY HUO</p>
		</div>
		<div id="menu">
			<ul>
				<li><a href="../main.do">首页</a></li>
				<li><a href="../documentLibrary.do?actMethod=showDocumentLibraryAction">文档库</a></li>
				<li><a href="TaskManagement.jsp">日程表</a></li>
				<li class="first current_page_item"><a href="FriendManagement.jsp">朋友们</a></li>
				<li><a href="#">关于我</a></li>
				<li><a href="#">关于这</a></li>
			</ul>
		</div>
        <div id="userinfo">
           		<a id="userWelcome">Hi,${sessionScope.username}</a>
                <a id="signout" href="../user.do?actMethod=quitUserAction">Sign out</a>
                <a id="register" href="register.jsp">Register</a>
         </div>
	</div>
	<!-- end #header -->
 
  <div id="friendsField">

    
	<table id="friendsTable" style=""></table>
	
	
	<!-- end #content -->
	<div style="clear: both;">&nbsp;
	</div>
			
	<!-- end #page -->
  </div>
  <div id="addFriendDialog" title="添加好友">
   	<div id="selectTabs">
   		<ul>
   			<li><a href="#selectTabs-1">按信息查询</a></li>
   			<li><a href="#selectTabs-2">精确查询</a></li>
   		</ul>
   		<div id="selectTabs-1">
   			年龄：<input type="text"/>
   			性别：<input type="text"/>
   			学历：<input type="text"/>
   			出生地：<input type="text"/>
   			所在地：<input type="text"/>
   			<input type="submit" value="搜索"/>
   		</div>
   		<div id="selectTabs-2">
   			用户名：<input id="newFriendName" name="newFriendName" type="text"/><img id="loadingpic" src="../images/checking.gif"/><span id="tusername">*</span>
   			<br/>
   			<button id="addNewFriendBtn">添加</button>
   		</div>
   	</div>
   </div>
</div>
<div id="footer">
	<p>Copyright (c) 2013 Avery.com. All rights reserved. Design by Avery.</p>
</div>
<!-- end #footer -->
</body>
</html>
